<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>火箭升空</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				height: 1213px;
				background: linear-gradient(#fff,#000);    
								/*默认是从上到下*/
			}
			
			
			
			.rocket{
				position: fixed;
				width: 149px;
				height: 249px;
				/*background: url(img/rocket_button_up.png) no-repeat;*/
				background: url(img/rocket_button_up.png) 0% top;
				top: 60%;
				right: 20px;
				
				
			}
			.rocket_run{
				animation: rocket_run .25s infinite steps(4) alternate;
			}
			.rocket:hover{
				background-position: -100% top;
				
			}
			@keyframes rocket_run{
				0%{
					background-position: -200%;
				}
				100%{
					background-position: -600%;
				}
			}
			
			/*.rocket:hover:active{
				transition: all 1.8s ease-in-out;
				top: -500px;
				*/
			}
		</style>
	</head>
	<body>
		<div class="rocket">
			
		</div>
		<script type="text/javascript">
//			var div = document.querySelector(".rocket");
//				div.addEventListener("click",function(){
//					div.style.backgroundPosition="-298px top";
//					
//				})
				var rocket = document.querySelector(".rocket"),
				is_run = false, //用来判断是否在升空过程(false表示不是)
				body_h = 0, //body的滚动高度
				body_speed = 0, //body的速度
				rocket_top = 0, //火箭的top值
				rocket_speed = 0, //火箭的速度
				rocket_h = parseInt(getComputedStyle(rocket).height), //获取rocket的自身高度
				rocket_s = 0; //火箭走的总路程

			//判断火箭是否出现
			window.addEventListener("scroll", function() {
				!is_run ? document.body.scrollTop > 300 ? rocket.style.display = "block" : rocket.setAttribute("style", "") : "";

			})

			//点击回到顶部
			rocket.addEventListener("click", function() {
				if(!is_run) {
					body_h = document.body.scrollTop;
					rocket_top = rocket.offsetTop;
					rocket_s = rocket_top + rocket_h;
					body_speed = body_h / 50;
					rocket_speed = rocket_s / 50;
					is_run = true;
					rocket.classList.add("rocket_run");

					var time = setInterval(function() {
						rocket_top < rocket_s / 8 ? rocket_speed += rocket_speed * .08 : "";
						body_h -= body_speed;
						document.body.scrollTop = body_h;
						rocket_top -= rocket_speed;
						rocket.style.top = rocket_top + "px";
						if(body_h <= 0) {
							clearInterval(time);
							rocket.classList.remove("rocket_run");
							rocket.style.display = "none";
							rocket.style.top = "420px";
							is_run = false;
						}
					}, 20)
				}
			})
			
		</script>
	</body>
</html>
